<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>尚硅谷会员登录页面</title>
    <link type="text/css" rel="stylesheet" href="../../static/css/style.css" />
  </head>
  <body>
  <div id="app">
    <div id="login_header">
      <a href="../../index.html">
        <img class="logo_img" alt="" src="../../static/img/logo.gif" />
      </a>
    </div>

    <div class="login_banner">
      <div id="l_content">
        <span class="login_word">欢迎登录</span>
      </div>

      <div id="content">
        <div class="login_form">
          <div class="login_box">
            <div class="tit">
              <h1>尚硅谷会员</h1>
            </div>
            <div class="msg_cont">
              <b></b>
              <span class="errorMsg" v-text="errorMsg" style="color:red">请输入用户名和密码</span>
            </div>
            <div class="form">
              <form action="login_success.html" @submit="checkLogin()">
                <label>用户名称：</label>
                <input
                        class="itxt"
                        type="text"
                        placeholder="请输入用户名"
                        autocomplete="off"
                        tabindex="1"
                        name="username"
                        id="username"
                        @change="checkUsername()"
                        v-model="username"
                />
                <br />
                <br />
                <label>用户密码：</label>
                <input
                        class="itxt"
                        type="password"
                        placeholder="请输入密码"
                        autocomplete="off"
                        tabindex="1"
                        name="password"
                        id="password"
                        @change="checkPassword()"
                        v-model="password"
                />
                <br />
                <br />
                <input type="submit" value="登录" id="sub_btn" />
              </form>
              <div class="tit">
                <a href="regist.html">立即注册</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
    </div>

  </div>
  <script src="/bookstome-v1/static/script/vue.js"></script>
  <script>
    var vue=new Vue({
      el:"#app",
      data:{
        username:"",
        password:"",
        errorMsg:"请输入用户名和密码"

      },
      methods:{
        checkUsername(){
          console.log("checkUsername"+this.username);
          var reg=/^\s*$/;
          if (reg.test(this.username)){
            console.log("账户为空");
            this.errorMsg="账户不能为空"
            return false;
          }else {
            console.log("账户不为空");
            this.errorMsg=""
            return true;
          }
        },
        checkPassword(){
          console.log("checkPassword"+this.password)
          var reg=/^\s*$/;
          if (reg.test(this.password)){
            console.log("密码为空");
            this.errorMsg="密码不能为空"
            return false;
          }else {
            console.log("密码不为空");
            this.errorMsg=""
            return true;
          }

        },
        checkLogin(){
          console.log("checkLogin");
          if (!this.checkUsername()||!this.checkPassword()){
            event.preventDefault();
          }
        }
      }


    })
  </script>

  </body>
</html>
